import React, { PureComponent } from 'react'
import type {  ReactNode } from 'react'

interface IProps {
  children?: ReactNode
  className?: string
  style?: React.CSSProperties
  disabled?: boolean
  options?: Array<IItem>
  defaultValue?: string
  onSelect?: (value: string) => void
}
interface IState {
  select: string
}

export class links extends PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = {
      select: props.defaultValue || ''
    }
  }
  handleClick = (option: IItem) => {
    this.setState({ select: option.value })
    if (this.props.onSelect) {
      this.props.onSelect(option.value)
    }
  }
  render() {
    const { options, style, className } = this.props
    const { select } = this.state
    return (
      <div className={"p-2"}>
        <ul className={"flex gap-2" + (className? ` ${className}` : '')} style={style}>
          {options && options.map((option, index) => (
            <li style={{color: option.value === select? '#8b96d9' : ''}} className={"text-base p-1 hover:text-primary-600 active:text-primary-700 cursor-pointer"} onClick={ () => this.handleClick(option) } key={index}>
              {option.label}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default links
